<template>
  <div v-perms="['User.list']">
    <div>
      <el-form :model="searchData" inline>
        <el-form-item label="名称">
          <el-input v-model="searchData.name" placeholder="请输入名称"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-loading="result.loading">
      <div v-perms="['User.add']">
        <el-button type="primary" @click="handleAdd">
          <template #icon>
            <el-icon>
              <Plus/>
            </el-icon>
          </template>
        </el-button>
      </div>

      <div class="mt-2">
        <el-table :data="result.list">
          <el-table-column prop="id" label="ID" width="85" align="center"/>
          <el-table-column prop="name" label="名称" min-width="150" align="center"/>
          <el-table-column prop="account" label="账号" min-width="150" align="center"/>
          <el-table-column prop="memo" label="备注" align="center"/>
          <el-table-column prop="create_time" label="创建时间" min-width="170" align="center"/>
          <el-table-column prop="update_time" label="修改时间" min-width="170" align="center"/>

          <el-table-column label="操作" min-width="150" align="center">
            <template #default="{ row }">
              <el-button type="success" link @click="handleResetUserPassword(row)" v-perms="['User.setUserPassword']">
                重置密码
              </el-button>
              <el-button type="warning" link @click="handleRole(row)"
                         v-perms="['Role.list', 'UserRole.list', 'UserRole.add']">
                角色
              </el-button>
              <el-button type="primary" link @click="handleEdit(row)" v-perms="['User.edit']">
                编辑
              </el-button>
              <el-button type="danger" link @click="handleDelete(row.id)" v-perms="['User.del']">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="flex justify-end mt-2">
        <Pagination :paging="paging"/>
      </div>
    </div>

    <edit-popup v-if="visible" v-model:visible="visible" ref="editRef" @success="handleSuccess"></edit-popup>
    <role-popup v-if="roleVisible" v-model:visible="roleVisible" ref="roleRef" @success="handleSuccess"></role-popup>
    <reset-pass-popup v-if="resetPassVisible" v-model:visible="resetPassVisible" ref="resetPassRef"
                      @success="handleSuccess"></reset-pass-popup>
  </div>
</template>

<script setup>

import {Plus} from "@element-plus/icons-vue";
import Pagination from '@/components/pagination/index.vue'
import {useList} from "@/hooks/useList";
import {list, edit, del} from '@/api/user'
import {nextTick, onMounted, reactive, ref, shallowRef} from "vue";
import editPopup from './edit.vue'
import resetPassPopup from './resetUserPassword.vue'
import rolePopup from './role.vue'
import feedback from '@/utils/feedback'


const editRef = shallowRef(editPopup)
const roleRef = shallowRef(rolePopup)
const resetPassRef = shallowRef(resetPassPopup)
const visible = ref(false)
const roleVisible = ref(false)
const resetPassVisible = ref(false)
const searchData = reactive({
  name: '',
})

const {paging, result, getList, search, resetSearch} = useList({
  apiFun: list,
  params: searchData
})

const handleAdd = async () => {
  visible.value = true
  await nextTick()
  await editRef.value?.setFormData()
}

const handleEdit = async (row) => {
  visible.value = true
  await nextTick()
  await editRef.value?.setFormData(row, 'edit')
}

const handleRole = async (row) => {
  roleVisible.value = true
  await nextTick()
  await roleRef.value?.setFormData(row)
}

const handleResetUserPassword = async (row) => {
  resetPassVisible.value = true
  await nextTick()
  await resetPassRef.value?.setFormData(row)
}

const handleDelete = async (id) => {
  await feedback.confirm('确认删除?')
  await del({ids: id})
  feedback.optionSuccess()
  getList()
}

const handleSuccess = async () => {
  visible.value = false
  roleVisible.value = false
  resetPassVisible.value = false
  getList()
  feedback.optionSuccess()
}

onMounted(() => getList())

</script>

<style scoped>

</style>